<template>
	<view class="viewport">
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="设备详情" color="#fff" @leftClick="leftClick"
			@rightClick="rightClick">
			<fui-icon color="#fff" name="arrowleft"></fui-icon>
		</fui-nav-bar>
		<view class="warp">
			<view class="port">
				<view class="head">
					<image class="headImg" src="../static/logo.png" mode=""></image>
					<view class="left">
						<view class="firLine">
							电动机车间
						</view>
						<view class="secLine">
							<view class="secLimeLeft">
								<u-icon name="map" color="#c8c8c8" size="16"></u-icon>
								<view class="secLimeLeftText">
									生产车间二层
								</view>
							</view>
							<view class="">
								<u-icon name="arrow-right" color="#c8c8c8" size="16"></u-icon>
							</view>
						</view>
						<text class="thirdLine">
							正常运行
						</text>
					</view>
				</view>

				<view class="middle">
					<view class="middleTitle">
						设备概况
					</view>
					<view class="">
						最后故障时间:2023-02-23 12:23
					</view>
					<view class="statusTime">
						<view class="statusTimeItem">
							<view class="number">
								8
							</view>
							<view class="">
								故障次数
							</view>
						</view>
						<view class="statusTimeItem">
							<view class="line">

							</view>
						</view>
						<view class="statusTimeItem">
							<view class="number">
								8
							</view>
							<view class="">
								停机次数
							</view>
						</view>
					</view>
					<view class="tab">
						<view class="tabItem tabItemChoosed">
							保养
						</view>
						<view class="tabItem">
							巡检
						</view>
						<view class="tabItem">
							点检
						</view>

					</view>

					<view class="operateInfo">
						<view class="">
							上次保养:2023-02-23 12:23:12
						</view>

						<view>
							廖兮萌
						</view>
					</view>

					<view class="table">
						<!-- 表头 -->
						<view class="table-row header">
							<text class="table-cell ">保养数量</text>
							<text class="table-cell ">已保养</text>
							<text class="table-cell ">未保养</text>
						</view>
						<!-- 数据行 -->
						<view class="table-row">
							<text class="table-cell">8项</text>
							<text class="table-cell blue">8项</text>
							<text class="table-cell orange">8项</text>
						</view>
					</view>

					<view class="nextOperate">
						距下次保养还有3天03小时20分钟
					</view>
				</view>

				<view class="footer">
					<view class="footerTitle">
						设备履历
					</view>
					<fui-list>

						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>维修记录</text>
							</view>
							<text class="fui-text__explain">最后维修x2022-11-22</text>
						</fui-list-cell>
						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>保养记录</text>
							</view>
						</fui-list-cell>
						
						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>巡检记录</text>
							</view>
						</fui-list-cell>
						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>点检记录</text>
							</view>
						</fui-list-cell>
						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>报修记录</text>
							</view>
						</fui-list-cell>
						
						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>关联备件</text>
							</view>
							<text class="fui-text__explain">15</text>
						</fui-list-cell>
						
						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>设备图片</text>
							</view>
							<text class="fui-text__explain">5</text>
						</fui-list-cell>
						
						<fui-list-cell arrow>
							<view class="fui-align__center">
								<image class="fui-list__icon" src="/static/images/institution/userName.png"
									mode="widthFix"></image>
								<text>关联文档</text>
							</view>
							<text class="fui-text__explain">5</text>
						</fui-list-cell>
					</fui-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const leftClick = () => {
		uni.navigateBack()
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
		background-color: pink;
	}

	.viewport {}

	.warp {
		height: 100%;
		background-color: #f6f6f6;
		font-family: Arial, Helvetica, sans-serif;
		padding-bottom: 150rpx;

		.port {
			padding: 18rpx;

			.head {
				display: flex;
				align-items: center;
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 20rpx;

				.headImg {
					width: 150rpx;
					height: 150rpx;
					margin-right: 30rpx;
				}

				.left {
					width: 550rpx;
					display: flex;
					flex-direction: column;

					.firLine {
						font-size: 35rpx;
						font-weight: bold;
					}

					.secLine {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.secLimeLeft {
							display: flex;

							.secLimeLeftText {
								color: #c8c8c8;
							}
						}
					}

					.thirdLine {
						width: 120rpx;
						padding: 0 10rpx;
						color: #fff;
						background-color: #0bb27a;
						border-radius: 10rpx;
						margin-top: 10rpx;
					}
				}
			}

			.middle {
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 20rpx;

				.middleTitle {
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.statusTime {
					margin-top: 20rpx;
					display: flex;
					background-color: #f3f6ff;
					justify-content: space-around;
					padding: 30rpx;
					border-radius: 10rpx;

					.statusTimeItem {
						width: 30%;
						text-align: center;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.line {

							height: 30rpx;
							width: 2rpx;
							background-color: #c3c3c3;
						}

						.number {
							font-size: 35rpx;
							color: #60adf1;
							margin-bottom: 10rpx;
						}
					}
				}

				.tab {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-around;

					.tabItem {
						width: 20%;
						text-align: center;
						padding: 20rpx;
						color: #727272;
					}

					.tabItemChoosed {
						border-bottom: 5rpx solid #4d74db;
						color: #4d74db;
						font-weight: bold;
					}
				}

				.operateInfo {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					color: #727272;
				}

				.table {
					margin-top: 20rpx;
					width: 100%;
					// border: 1px solid #ccc;
					border-spacing: 0;
					border-collapse: collapse;

					.table-row {
						display: flex;
						width: 100%;
						border-bottom: 1px solid #e8e8e8;
					}

					.header {
						background-color: #f8f8f8;
					}

					.table-cell {
						flex: 1;
						text-align: center;
						padding: 10px 0;
						// background-color: #fff;
					}

					.blue {
						color: #4d74db;
					}

					.orange {
						color: #fa9200;
					}
				}

				.nextOperate {
					margin-top: 20rpx;
					text-align: end;
					color: #727272;
				}

			}

			.content_box {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				padding: 0 60rpx;
				margin: 30rpx 0;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					height: 140rpx;
					width: 120rpx;
				}

				.image {
					height: 48rpx;
					width: 48rpx;
				}

				.content_title {
					font-size: 25rpx;
				}
			}
		}

		.footer {
			.footerTitle {
				background-color: #fff;
				padding: 20rpx;
				font-weight: bold;
			}
			
			.fui-align__center {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.fui-text__explain {
				color: #ccc;
			}

			.fui-list__icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx;
			}

			
		}
	}
</style>